<template>
	<view class="classLayout">
		<custom-nav-bar title='分类'></custom-nav-bar>
		<view class="content">
			<riddle-item class="riddle-item" v-for="(item, index) in riddleList" :key="index"
				:item="item"></riddle-item>
		</view>

	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
	.classLayout {
		.classify {
			padding: 30rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15rpx;
		}

		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15rpx;
			width: 100%;
			max-width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			background: #fff;
			border-radius: 10px;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);

			.riddle-item {
				overflow: hidden;
			}
		}
	}
</style>